<template>
    <div :style="'position:'+this.position+';'" class="cc-pagin">
    
        <el-pagination
            @size-change="onPaginSizeChange"
            @current-change="onPaginChange"
            :current-page="1"
            :page-sizes="[15, 30, 50, 10, 5]"
            :page-size="pagin.rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagin.total">
        </el-pagination>
    </div>
</template>

<script>
module.exports = {
    data: function() {
        return {
            pagin: {
                total: 0,
                page: 1,
                rows: 15
            }
        }
    },
    created: function() {
        this.pagin = this.value;
    },
    props: {
        value: Object,
        position: {
            default: 'fixed',
            type: String
        }
    },
    methods: {
        onPaginSizeChange: function(val) {
            // console.log("onPaginSizeChange", val);
            this.pagin.rows = val;
            this.loadTable();
        },
        onPaginChange: function(val) {
            // console.log("onPaginChange", val);
            this.pagin.page = val;
            this.loadTable();
        },
        loadTable: function() {
            this.$emit('input', this.pagin);
            this.$emit('pagin-change', this.pagin);
        }
    }
    
}
</script>

<style>
    .cc-pagin {
        overflow: auto;
        bottom:0px; background: #fff; padding-left: 10px;  z-index: 100;
    }
</style>